<template>
  <view class="container">
    <!-- 返回按钮 -->
    <view class="back-btn" @tap="goBack">
      <u-icon name="arrow-left" color="#fff" size="20" />
    </view>

    <!-- 订单状态 -->
    <view class="status-section">
      <view class="status-header">
        <text class="status-title">订单状态</text>
        <text class="status-value" :class="order.status">
          {{ getStatusText(order.status) }}
        </text>
      </view>
      
      <view class="status-timeline">
        <view class="timeline-item" :class="{ active: order.status === 'pending' }">
          <view class="timeline-dot"></view>
          <text class="timeline-text">已下单</text>
        </view>
        <view class="timeline-item" :class="{ active: order.status === 'completed' }">
          <view class="timeline-dot"></view>
          <text class="timeline-text">已完成</text>
        </view>
        <view v-if="order.status === 'cancelled'" class="timeline-item active">
          <view class="timeline-dot"></view>
          <text class="timeline-text">已取消</text>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="info-section">
      <view class="section-header">
        <text class="section-title">订单信息</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">订单号：</text>
        <text class="info-value">{{ order.orderNumber }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">下单时间：</text>
        <text class="info-value">{{ formatDateTime(order.createdAt) }}</text>
      </view>
      
      <view v-if="order.completedAt" class="info-item">
        <text class="info-label">完成时间：</text>
        <text class="info-value">{{ formatDateTime(order.completedAt) }}</text>
      </view>
      
      <view v-if="order.cancelledAt" class="info-item">
        <text class="info-label">取消时间：</text>
        <text class="info-value">{{ formatDateTime(order.cancelledAt) }}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="items-section">
      <view class="section-header">
        <text class="section-title">商品列表</text>
        <text class="items-count">共{{ order.items?.length || 0 }}件商品</text>
      </view>
      
      <view class="items-list">
        <view
          v-for="item in order.items"
          :key="item.id"
          class="item-card"
        >
          <image class="item-image" :src="item.image" mode="aspectFill" />
          <view class="item-details">
            <text class="item-name">{{ item.name }}</text>
            <text v-if="item.spec" class="item-spec">规格：{{ item.spec.name }}</text>
            <text v-if="item.specialRequests" class="item-requests">要求：{{ item.specialRequests }}</text>
            <view class="item-footer">
              <view class="item-price">
                <text class="price-value">{{ item.points }}</text>
                <u-icon name="heart-fill" color="#ff6b81" size="14" />
              </view>
              <text class="item-quantity">x{{ item.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单备注 -->
    <view v-if="order.specialRequests" class="notes-section">
      <view class="section-header">
        <text class="section-title">订单备注</text>
      </view>
      <view class="notes-content">
        {{ order.specialRequests }}
      </view>
    </view>

    <!-- 订单总结 -->
    <view class="summary-section">
      <view class="section-header">
        <text class="section-title">订单总结</text>
      </view>
      
      <view class="summary-item">
        <text class="summary-label">商品总计</text>
        <view class="summary-value">
          <text class="points">{{ order.totalPoints }}</text>
          <u-icon name="heart-fill" color="#ff6b81" size="14" />
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <custom-button
        v-if="order.status === 'pending'"
        type="secondary"
        text="取消订单"
        @click="cancelOrder"
      />
      <custom-button
        v-if="order.status === 'pending'"
        type="primary"
        text="确认取餐"
        @click="confirmOrder"
      />
      <custom-button
        v-if="order.status === 'completed'"
        type="primary"
        text="再来一单"
        @click="reorder"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useOrderStore } from '@/store/modules/order'

const orderStore = useOrderStore()

// 页面参数
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})

// 数据
const order = ref({})

// 计算属性
const orderItems = computed(() => order.value.items || [])

// 方法
const goBack = () => {
  uni.navigateBack()
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const formatDateTime = (timestamp) => {
  if (!timestamp) return ''
  
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

const cancelOrder = () => {
  uni.showModal({
    title: '取消订单',
    content: '确定要取消这个订单吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '取消中...' })
          await orderStore.cancelOrder(parseInt(props.id))
          uni.hideLoading()
          uni.showToast({
            title: '订单已取消',
            icon: 'success'
          })
          await loadOrderDetail()
        } catch (error) {
          uni.hideLoading()
          uni.showToast({
            title: '取消失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

const confirmOrder = () => {
  uni.showModal({
    title: '确认取餐',
    content: '确定已取餐完成吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '确认中...' })
          await orderStore.completeOrder(parseInt(props.id))
          uni.hideLoading()
          uni.showToast({
            title: '取餐完成',
            icon: 'success'
          })
          await loadOrderDetail()
        } catch (error) {
          uni.hideLoading()
          uni.showToast({
            title: '确认失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

const reorder = () => {
  // 这里可以实现一键重新下单的逻辑
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

const loadOrderDetail = async () => {
  try {
    await orderStore.getOrders()
    const foundOrder = orderStore.orders.find(o => o.id === parseInt(props.id))
    
    if (!foundOrder) {
      uni.showToast({
        title: '订单不存在',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
      return
    }
    
    order.value = foundOrder
  } catch (error) {
    console.error('加载订单详情失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    })
  }
}

onMounted(() => {
  loadOrderDetail()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
  padding-bottom: 120rpx;
}

.back-btn {
  position: fixed;
  top: 60rpx;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.status-section,
.info-section,
.items-section,
.notes-section,
.summary-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
    
    .items-count {
      font-size: 24rpx;
      color: #666;
}
  }
}

.status-section {
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .status-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
    
    .status-value {
      font-size: 28rpx;
      font-weight: bold;
      
      &.pending {
        color: #ff6b81;
}
      
      &.completed {
        color: #52c41a;
}
      
      &.cancelled {
        color: #999;
}
    }
  }
  
  .status-timeline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    .timeline-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .timeline-dot {
        width: 20rpx;
        height: 20rpx;
        background: #ccc;
        border-radius: 50%;
        margin-bottom: 10rpx;
}
      
      .timeline-text {
        font-size: 24rpx;
        color: #666;
}
      
      &.active {
        .timeline-dot {
          background: #ff6b81;
}
        
        .timeline-text {
          color: #ff6b81;
          font-weight: bold;
}
      }
    }
  }
}

.info-section {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
}
    
    .info-label {
      font-size: 28rpx;
      color: #666;
}
    
    .info-value {
      font-size: 28rpx;
      color: #333;
}
  }
}

.items-list {
  .item-card {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
}
    
    .item-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
}
    
    .item-details {
      flex: 1;
      
      .item-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 4rpx;
}
      
      .item-spec,
      .item-requests {
        font-size: 24rpx;
        color: #666;
        display: block;
        margin-bottom: 4rpx;
}
      
      .item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .item-price {
          display: flex;
          align-items: center;
          
          .price-value {
            font-size: 28rpx;
            font-weight: bold;
            color: #ff6b81;
            margin-right: 4rpx;
}
        }
        
        .item-quantity {
          font-size: 24rpx;
          color: #666;
}
      }
    }
  }
}

.notes-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
}

.summary-section {
  .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    
    .summary-label {
      font-size: 28rpx;
      color: #666;
}
    
    .summary-value {
      display: flex;
      align-items: center;
      
      .points {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff6b81;
        margin-right: 4rpx;
}
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: flex-end;
   margin-right: 20rpx; &:last-child { margin-right: 0; }
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>